<template>
  <div class="fs">
    <Layout :style="{padding: '16px'}">
      <Content :style="{padding: '16px', minHeight: '280px', background: '#fff'}">
        <div class="fs-header" ghost>
          <div class="fs-header-search">
            <span>搜索条件：</span>
            <Input v-model="search" placeholder="请输入文件名..." style="width: 300px"></Input>
            <Button @click="toSearch"><Icon type="md-search" />搜索</Button>
          </div>
          <Button @click="addDrawer=true"><Icon type="md-add" />上传</Button>
          <Button @click="toRefresh"  id="aa"><Icon type="md-sync" />刷新</Button>
        </div>
        <div style="width: 100%;height: 72vh;overflow: hidden;margin-top: 1%">
        <div style="overflow-y:scroll;width: 101.5%;height: 100%;margin-right: -20px">
          <div class="fs-content" style="text-align: left">
            <div class="fs-icon" v-for="item in fsFile" >
              <Icon class="icon-x" type="md-close-circle" @click="toDel(item.id)" size="20" style="margin-left: 90%"/>
                <div @click="toDown(item.fileSourceName,item.fileSize)">
                  <img :src="'../../../static/images/fs/'+item.iconType+'.png'" width="100%">
                  <Poptip word-wrap trigger="hover" :title="item.fileSourceName" :content="'文件描述：'+item.fileDesc+'\n文件大小：'+item.fileSize.substring(0,item.fileSize.lastIndexOf('.')+3)+'KB'" placement="bottom">
                    <span>{{item.fileSourceName | capitalize}}</span>
                  </Poptip>
                </div>
            </div>
            <div style="clear:both;padding: 6px">
              <Page :total="fsFile_total" :current="fsFile_current_page" :page-size="fsFile_page_size" @on-change="onChange" @on-page-size-change="onPageSizeChange" show-total show-sizer size="small" style="position:relative;float:right;margin-top:12px"/>
            </div>
          </div>
        </div>
      </div>
      </Content>
    </Layout>
    <Drawer title="上传文件" :closable="false" v-model="addDrawer" width="30" :mask-closable="false">
      <Form ref="addForm" :model="addForm" :rules="addRuleVal" :label-width="100">
        <FormItem label="选择文件：">
          <Upload type="drag"
                  :max-size="102400"
                  :accept="accept"
                  :format="format"
                  name="file"
                  :data="{id:'123123'}"
                  :default-file-list="defaultFileList"
                  :on-success="onSuccess"
                  :on-error="onError"
                  :on-format-error="onFormatError"
                  :on-exceeded-size="onExceededSize"
                  :action="action">
            <div style="padding: 20px 0">
              <Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon>
              <p>请点击此处或拖拽文件至此</p>
              <p style="color: gray">文件大小必须小于100MB</p>
            </div>
          </Upload>
        </FormItem>
        <FormItem label="文件描述：" prop="fileDesc">
          <Input v-model="addForm.fileDesc" type="textarea" :rows="4"  placeholder="请输入文件描述..."></Input>
        </FormItem>
      </Form>
      <div class="demo-drawer-footer">
        <Button type="primary" @click="handleSubmit('addForm')">提交</Button>
        <Button @click="handleReset('addForm')" style="margin-left: 8px">取消</Button>
      </div>
    </Drawer>
  </div>
</template>

<script>
  import {toGet,toPost} from "../../utils/MyAxios";
  import {gatewayUrl} from '../../configs/BaseConfigs';
  import {mapActions,mapGetters} from 'vuex';
    export default {
        name: "index",
        data() {
            return {
              target:[],
              contextMenuVisible:false,
              action:gatewayUrl+'/zuul/filesystem/file/upload',
              accept:".txt,.png,.jpg,.jpeg,.doc,.docx,.xls,.xlsx,.ppt,.pptx,.pdf,.dwt,.dwg,.dws,.dxf,.zip,.rar",//文件选择对话框-文件过滤
              format:['txt','png','jpg','jpeg','doc','docx','xls','xlsx','ppt','pptx','pdf','dwt','dwg','dws','dxf','zip','rar'],//上传文件时识别文件的后缀名
              search:'',
              addForm:{},
              defaultFileList:[],
              addRuleVal:{
                fileDesc: [
                  { required: true, message: '请输入文件描述', trigger: 'blur' }
                ],
              },
              addDrawer:false,
            }
        },
        computed: {
          ...mapGetters(['fsFile','fsFile_total','fsFile_current_page','fsFile_page_size']),
        },
        methods: {
          ...mapActions(['getFsFile']),
          handleSubmit (name) {
            this.$refs[name].validate((valid) => {
              if(this.addForm.fileSourceName){
                let params = {
                  fileSourceName:this.addForm.fileSourceName,
                  iconType:this.addForm.iconType,
                  fileSize:this.addForm.fileSize,
                  fileDesc:this.addForm.fileDesc,
                  uploadPeople:'blank'
                };
                this.defaultFileList=[];
                toPost('/filesystem/file/add',params)
                  .then(res=>{
                    if (res.resultCode === 0) {
                      this.$Notice.success({
                        title: '上传文件成功'
                      });
                      this.$refs[name].resetFields();
                      this.toRefresh();
                      this.addDrawer=false;
                    }else{
                      this.$Notice.error({
                        title: '上传文件信息失败',
                        desc: '服务器发生未知错误'
                      })
                    }
                  })
              }else{
                this.$Notice.warning({
                  title: '请先上传文件后再尝试'
                })
              }
            });
          },
          handleReset (name) {
            this.addDrawer=false;
            this.$refs[name].resetFields();
          },
          onSuccess(res, file, fileList){
            if(res.resultCode===0){
              let data = res.data;
              this.addForm.fileSourceName=data.fileSourceName;
              this.addForm.fileSize=data.fileSize;
              this.addForm.iconType=data.iconType;
              fileList[0].name=data.fileSourceName;
              this.defaultFileList.push(fileList[0]);
            }
          },
          onError(error, file, fileList){
            this.$Notice.error({
              title: '文件上传错误',
              desc: error
            })
          },
          onFormatError(){
            this.$Notice.warning({
              title: '上传受限',
              desc: '文件类型只能是'+this.accept
            })
          },
          onExceededSize(){
            this.$Notice.warning({
              title: '上传受限',
              desc: '文件大小不能超过100MB'
            })
          },
          onChange(currentPage){
            this.getFsFile({
              'search':this.search,
              'currentPage':currentPage*1,
              'pageSize':this.fsFile_page_size
            })
          },
          onPageSizeChange(pageSize){
            this.getFsFile({
              'search':this.search,
              'currentPage':this.fsFile_current_page,
              'pageSize':pageSize*1
            })
          },
          toSelectMenu(target){
             this.$router.push('ac-'+target);
          },
          jump(e){
            this.$router.push(e);
          },
          toRefresh(){
            this.getFsFile({
              'search':this.search,
              'currentPage':this.fsFile_current_page,
              'pageSize':this.fsFile_page_size
            })
          },
          toSearch(){
            this.getFsFile({
              'search':this.search,
              'currentPage':this.fsFile_current_page,
              'pageSize':this.fsFile_page_size
            })
          },
          toDel(id){
            swal({
              title: "您确定删除该文件吗?",
              text: "删除该文件后，系统将删除该文件的所有信息!",
              icon: "warning",
              buttons: ["取消", "确认"],
              dangerMode: true,
            })
              .then((willDelete) => {
                if (willDelete) {
                  toGet('/filesystem/file/delete/'+id)
                    .then(res=>{
                      if (res.resultCode === 0) {
                        swal("删除成功!", {
                          icon: "success",
                        });
                        this.getFsFile({
                          'search':this.search,
                          'currentPage':this.fsFile_current_page,
                          'pageSize':this.fsFile_page_size
                        });
                      }
                    })
                    .catch(error=>{
                      swal("删除失败!", {
                        icon: "error",
                      });
                    });
                }
              });
          },
          toDown(fileName,fileSize){
            swal({
              title: "确认下载该文件吗?",
              text: "文件名："+fileName+"\n文件大小："+fileSize.substring(0,fileSize.lastIndexOf('.')+3)+"KB",
              icon: "warning",
              buttons: ["取消", "确认"],
              dangerMode: true,
            })
              .then((will) => {
                if (will) {
                  window.location.href='http://localhost:8763/filesystem/file/downFile?fileName='+fileName;
                }
              });
          }
        },
        filters: {
          capitalize: function (value) {
            if (value.length>5){
              return value.substring(0,5)+'...';
            }
            else{
              return value;
            }
          }
        },
        mounted() {
          this.getFsFile({
            'search':this.search,
            'currentPage':this.fsFile_current_page,
            'pageSize':this.fsFile_page_size
          });
          this.target=document.getElementById("aa");
        }
    }
</script>

<style scoped>


</style>
